<template>
    <div style="padding:10px">
      <el-card class="box-card">
        <!--1. 查询学生信息-->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-left: 20px;">
          <el-form-item label="学生姓名">
            <el-input v-model="searchForm.sname" placeholder="学生姓名"></el-input>
          </el-form-item>
          <el-form-item label="学生住址">
            <el-input v-model="searchForm.addr" placeholder="学生住址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="success" size="small" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
          </el-form-item>
        </el-form>

        <!--2. 使用表格展示数据-->
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="学生姓名"
            align="center"
            prop="sname"
            width="180"/>
          <el-table-column
            label="性别"
            align="center"
            prop="sex"
            width="180"/>
          <el-table-column
            label="年龄"
            align="center"
            prop="age"
            width="180"/>
          <el-table-column
            label="住址"
            align="center"
            prop="addr"
            width="180"/>
          <el-table-column
            label="所在班级"
            align="center"
            prop="cname"
            width="180"/>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                icon="el-icon-edit"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                plain
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
      <!--1. 引入子组件-->
      <add-or-update v-if="dialogVisible" ref="studentDialog" @refreshDataList="search"/>
    </div>
</template>

<script>
  import {findAll,search,delStudent} from "@/api/student";
  import {findClasses} from '@/api/classes'
  import AddOrUpdate from './add-or-update'
  export default {
        name: "index",
        components:{AddOrUpdate},
        data(){
          return {
            dialogVisible:false,
            page:1,
            pageSize:5,
            total:100,
            searchForm:{},
            tableData: [],
          }
        },
        created() {
          //1. 查询所有学生
          //this.findAllStudents();
          //2. 分页带条件查询
          this.search();
          //3. 查询所有班级
          this.findClasses();
        },
        methods:{
          //1. 查询所有学生
          findAllStudents(){
            findAll().then(({data})=>{
              console.log(data);
              this.tableData = data.students;
            })
          },
          //2. 条件查询带分页
          async search(){
            // search(this.page,this.pageSize,this.searchForm).then(({data})=>{
            //     console.log(data);
            //     //2.1 刷新页面
            //     this.tableData = data.rs.rows;
            //     //2.2 更新总记录数
            //     this.total = data.rs.total;
            // })
            //改造成：ES7的async + await
            let {data} =  await search(this.page,this.pageSize,this.searchForm);
            console.log(data);
            //2.1 刷新页面
            this.tableData = data.rs.rows;
            //2.2 更新总记录数
            this.total = data.rs.total;
          },
          //3. 查询所有班级
          findClasses(){
            findClasses().then(({data})=>{
              this.classes = data.classes;
            })
          },

          //7. 删除学生
          handleDelete(index, row) {
            let _this = this;
            console.log(index, row);
            this.$confirm(`你确定要删除'${row.sname}'`, '温馨提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {   //代表点击了“确定”按钮
              let rs = await delStudent(row.sid);
              if(rs.code == 20000){
                //① 刷新学生列表
                _this.search();
                //② 关闭对话框
                _this.dialogFormVisible = false;
              }

            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          // 添加修改学生
          handleEdit(row={}){
            this.dialogVisible = true;
            this.$nextTick(()=>{
              this.$refs.studentDialog.init(row);
            })
          },
          // 页大小改变时触发
          handleSizeChange(pagesize) {
            console.log(`每页 ${pagesize} 条`);
            this.pageSize = pagesize;
            this.handleCurrentChange();
          },
          // 当前页改变时触发
          handleCurrentChange(val=1) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.search();
          }
        }
    }
</script>

<style scoped>
  .el-pagination{
    text-align: right;
  }
</style>
